<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/guiZhangZhiDu/gzzd_regulationsType.css">
    <link rel="stylesheet" href="../font/iconfont/font_wfwf1mhqz7/iconfont.css">
    <link rel="stylesheet" href="../font/iconfont/font_wfwf1mhqz7/iconfont.ttf">
    <script src="../js/jquery-3.1.1.js"></script>
    <script src="../js/allData.js"></script>
    <script src="../js/utils.js"></script>
    <title>规章制度-法规类型</title>
</head>

<body>
    <div id="mainDiv">
        <div class="clear">
            <div><span>装备分类</span></div>
            <div><button>添加分类</button></div>
        </div>
        <table>
            <thead>
                <tr>
                    <th>类别名称</th>
                    <th></th>
                    <th>资料数</th>
                    <th></th>
                    <th>更新时间</th>
                    <th></th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <script>
        // 1.先在login界面中把需要的数据存储至本地存储
        // 2.从本地存储中获取数据
        let jszl_dataTypes = getData('arrTypes')
        console.log(jszl_dataTypes);
        function showTable() {
            $('#mainDiv table tbody').html('')
            jszl_dataTypes = getData('arrTypes')
            // // 清除上一页的table内容
            // $('#mainDiv table tbody').html('')
            jszl_dataTypes.forEach(item => {
                $('#mainDiv table tbody').append(`
                <tr>
                    <td>${item.className}</td>
                    <td></td>
                    <td>${item.dataNum}</td>
                    <td></td>
                    <td>${item.updateTime}</td>
                    <td></td>
                    <td>
                        <button class="alt iconfont icon-xiugaimima"></button>
                        <button class="del iconfont icon-huishouzhan"></button>
                    </td>
                </tr>
                `)
            });
        }
        jszl_dataTypes = getData('arrTypes')
        showTable()
        // 修改tr的样式
        $('#mainDiv table tbody tr').css(
            "text-align", "center",
        )

        // 删除按钮
        $('#mainDiv table tbody').on('click', '.del', function () {
            console.log(this.parentNode.parentNode);
            console.log($(this).parent().parent().index());
            // jszl_dataTypes.splice($(this).parent().parent().index(), 1)
            // showTable()
            // jszl_dataTypes.forEach((index, item) => {
            //     item.splice(index, 1)
            //     setData('arrTypes', dataTypes)
            //     showTable()
            // });

            for (let i = 0; i < jszl_dataTypes.length; i++) {
                if ($(this).parent().parent().index() == i) {
                    console.log(i);
                    jszl_dataTypes.splice(i, 1)
                    setData('arrTypes', jszl_dataTypes)
                    showTable()
                }
            }
        })

    </script>
</body>

</html>